<template>
  <div class="container">
    <!-- 上 -->
    <quest-check @seach="seach" @clear="clear" />

    <!-- Tabs标签页 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first" />
      <el-tab-pane label="待审核" name="second" />
      <el-tab-pane label="已审核" name="third" />
      <el-tab-pane label="已拒绝" name="fourth" />
    </el-tabs>
    <!-- 基础题库表格区域 -->
    <!-- 下 -->
    <select-list
      :counts="counts"
      :table-data="tableData"
      @requestData="requestData"
      @goToTheShelf="goToTheShelf"
      @delet="delet"
    />

    <!-- 分页区域 -->
    <questions-pagination ref="pagination" :total="counts" :query-obj="query" @query="queryFn" />
  </div>
</template>

<script>
import QuestCheck from '../components/questions-checkbox'
import SelectList from '../components/questions-check'
import QuestionsPagination from '../components/questions-pagination.vue'
import { choice, choicePublish, remove } from '@/api/hmmm/questions'

export default {
  components: {
    QuestCheck,
    SelectList,
    QuestionsPagination
  },
  data () {
    return {
      tableData: [], // 表格数据
      activeName: 'first',
      query: {
        page: 1, // 当前页
        pagesize: 5, // 当前页显示多少条
        chkState: null
      },
      counts: 0, // 总共条数
      formData: {} // 表单数据
    }
  },
  created () {
    this.choiceFn()
  },
  methods: {
    // 子传父事件
    queryFn (query) {
      this.query = { ...query, ...this.formData, chkState: this.query.chkState }
      this.choiceFn()
    },
    // 子传父搜索按钮
    async seach (obj) {
      // console.log(obj)
      const res = await choice({
        page: this.query.page,
        pagesize: this.query.pagesize,
        ...obj
      })
      this.formData = obj
      this.tableData = res.data.items
      this.counts = res.data.items.length
    },
    // 子传父清除按钮
    clear () {
      this.formData = this.$options.data().formData
      this.choiceFn()
      this.activeName = 'first'
      this.handleClick()
    },
    // 表单点击事件
    handleClick () {
      if (this.activeName === 'second') {
        this.query.chkState = 0
      } else if (this.activeName === 'third') {
        this.query.chkState = 1
      } else if (this.activeName === 'fourth') {
        this.query.chkState = 2
      } else {
        this.query.chkState = null
      }
      this.query = {
        page: this.$options.data().query.page,
        pagesize: this.$options.data().query.pagesize,
        chkState: this.query.chkState,
        ...this.formData
      }
      this.choiceFn()
    },
    // 删除
    async delet (row) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        // 重新渲染数据
        this.choiceFn()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 上下架
    async goToTheShelf (row) {
      try {
        if (row.publishState === 0) {
          await this.$confirm('您确定要上架这道题目么?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } else {
          await this.$confirm('您确定要下架这道题目么?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        }
        if (row.publishState === 1) {
          row.publishState = 0
        } else {
          row.publishState = 1
        }
        await choicePublish(row)
        this.$message({
          type: 'success',
          message: row.publishState === 1 ? '上架成功!' : '下架成功!'
        })
        this.choiceFn()
      } catch (error) {
        this.$message({
          type: 'info',
          message: row.publishState === 1 ? '取消下架!' : '取消上架!'
        })
      }
    },
    // 审核成功更新列表数据
    requestData () {
      this.choiceFn()
    },

    // 获取列表数据
    async choiceFn () {
      const res = await choice(this.query)
      // console.log(res)
      this.tableData = res.data.items
      // console.log(this.tableData)
      this.counts = res.data.counts
      // console.log(this.counts)
      //
    }
  }
}
</script>

<style scoped>
.container {
  position: relative;
  padding-left: 30px;
  background-color: #fff;
}
select-list {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
</style>
